<template>
  <!-- 中途退宿登记 -->
  <div>
    <el-descriptions title="学生信息" class="descript"> </el-descriptions>
    <el-form
      ref="form"
      :model="form"
      label-width="90px"
      style="padding-top: 10px"
    >
      <el-form-item label="学生学号">
        <el-input
          v-model="sfzhm"
          placeholder="请输入学号"
          maxlength="30"
          style="width: 30%"
        />
      </el-form-item>
      <div class="divider">
        <el-divider></el-divider>
      </div>
      <el-row>
        <el-col :span="4">
          <el-form-item label="学生学号：" style="padding-left: 10px"
            >{{ form.XSXH }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="学籍：">{{ form.XJ }} </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="专业：">{{ form.ZY }} </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="班级：">{{ form.BJ }} </el-form-item>
        </el-col>
      </el-row>

      <el-descriptions class="descript" title="现住宿信息"> </el-descriptions>
      <el-row>
        <el-col :span="4">
          <el-form-item label="公寓楼：">{{ form.XSXH }} </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="房间号：">{{ form.ZY }} </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="床位：">{{ form.BJ }} </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="退宿原因">
            <el-input
              type="textarea"
              v-model="form.YY"
              rows="4"
              placeholder="请输入原因"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: center">
      <el-button @click="onSubmit">登记</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      sfzhm: null,
      timeout: null,
    };
  },
  watch: {
    sfzhm(curval, oldval) {
      // console.log(curval, "curval");
      clearInterval(this.timeout);
      this.timeout = setTimeout(() => {
        // console.log("sfzhm", this.sfzhm);
        if (this.sfzhm != "" && this.sfzhm.length >= 8) {
          console.log("发送请求");
        }
      }, 1000);
    },
  },
  methods: {
    onSubmit() {
      console.log(this.form, "提交的数据");
    },
    // 重置
    reset() {
      this.form = {};
      this.sfzhm = "";
    },
  },
};
</script>

<style scoped>
.descript {
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  background-color: #f5f5f5;
}
.divider {
  padding-left: 10px;
  padding-right: 10px;
}
.el-divider--horizontal {
  margin: 0;
}
.el-form-item {
  margin-bottom: 10px;
}
</style>